<template>
  <!-- 登录组件 -->
  <div class="box">
    <div class="login-bac"></div>
    <div class="login-container">
      <div class="login-box">
        <!-- 头像 start -->
        <div class="login-head-portrait">
          <img src="../assets/pic/head_logo.jpeg" alt="" />
        </div>
        <!-- 头像 end -->
        <span class="login-to-register"> 没有账号？<a href="javascript:;" @click="toRegister">去注册</a> </span>
        <!-- 登录模块表单 start -->
        <el-form ref="loginFormRef" class="login-form" label-width="80px" :model="loginForm" :rules="loginRules">
          <el-form-item label="账号" prop="uname">
            <el-input v-model="loginForm.uname" prefix-icon="el-icon-user" placeholder="请输入账号" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password clearable></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button class="btn-reset" size="small" @click="resetFormInput($event)">重置</el-button>
            <el-button class="btn-often" size="small" type="primary" @click="loginInputValidate($event)">登录</el-button>
          </el-form-item>
        </el-form>
        <!-- 登录模块表单 end -->
      </div>
    </div>
  </div>
</template>

<script>
// import Bus from '@/utils/bus.js'
// import qs from 'qs'
import btn from '../utils/btn.js'
export default {
  data() {
    return {
      // 表单数据绑定
      loginForm: {
        uname: '',
        password: ''
      },
      // 表单验证规则绑定
      loginRules: {
        // 账号不能为空
        uname: [{ required: true, message: '账号不能为空', triggger: 'blur' }],
        // 密码不能为空
        password: [{ required: true, message: '密码不能为空', triggger: 'blur' }]
      }
    }
  },
  methods: {
    // 路由跳转至注册界面
    toRegister() {
      this.$router.push({
        name: 'register'
      })
    },
    // 重置清空
    resetFormInput(e) {
      btn.preBtnFocus(e)
      // resetFields
      this.$refs.loginFormRef.resetFields()
    },
    // 登录验证
    loginInputValidate(e) {
      btn.preBtnFocus(e)
      this.$refs.loginFormRef.validate(async (result) => {
        // console.log('校验结果', result)
        if (result) {
          const res = await this.$http.post('login', {
            account: this.loginForm.uname,
            password: this.loginForm.password
          })
          // console.log('登录返回的数据', res)
          if (res.data) {
            // Bus.$on('user', this.loginForm.uname)
            // 存储登录状态 存储至sessionStorage中
            const code = new Date().getTime()
            const num = Math.random() * 10000
            window.sessionStorage.setItem('token', code + num)
            // 存储用户信息
            window.sessionStorage.setItem('user', JSON.stringify(res.data))
            // 跳转至首页
            this.$router.push('home')
            this.$message.success('登录成功！欢迎您！')
          } else {
            this.$message.error('密码错误或用户不存在！')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100vh;
}
// 背景
.login-bac {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: url('../assets/pic/back.jpg') no-repeat;
  filter: blur(2px);
  background-size: cover;
}
// 主体
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.login-box {
  position: relative;
  width: 450px;
  height: 300px;
  border-radius: 25px;
  box-shadow: 0px 0px 10px #ddd;
  background-color: rgba(255, 255, 255, 0.8);
}

// 头像
.login-head-portrait {
  width: 30%;
  height: 43%;
  margin: -13% 20px 0px 35%;
  overflow: hidden;
  border-radius: 65px;
  border: 1px solid #eee;
  box-shadow: 0px 0px 10px #ddd;
}

// 去注册
.login-to-register {
  position: absolute;
  top: 45px;
  right: 45px;
  color: black;
  font-size: 12px;
}
.login-to-register > a {
  color: blue;
  font-size: 16px;
  text-decoration: none;
}

// 登录模块表单
.login-form {
  // position: absolute;
  box-sizing: border-box;
  width: 100%;
  padding: 0px 40px 0px 10px;
  margin-top: 25px;
}
img {
  width: 100%;
  height: 100%;
}
/* 按钮 */
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>
